import React from 'react';
import { connect } from 'dva';
import { List, Button, Input, Form } from 'antd';
const { TextArea } = Input;


// const onFinish = values => {
//     console.log('Success:', values);
//   };

//   const onFinishFailed = errorInfo => {
//     console.log('Failed:', errorInfo);
//   };

class MessagePage extends React.Component {
    formRef = React.createRef();
    render() {
        let list = this.props.message.list;
        return (
            <div>
                <h1>留言板</h1>
                <hr />
                <Form
                    ref={this.formRef}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                >
                    <Form.Item
                        name="author"
                        rules={[{ required: true, message: '请输入留言人!' }]}
                    >
                        <Input ref={(input) => { this.author = input }} type="text" placeholder="留言人" />
                    </Form.Item>
                    <Form.Item
                        name="content"
                        rules={[{ required: true, message: '请输入留言内容!' }]}
                    >
                        <TextArea autoSize={{ minRows: 2, maxRows: 6 }} ref={(input) => { this.content = input }} rows={3} placeholder="留言内容" />
                    </Form.Item>
                    <Button type="primary" htmlType="submit">
                        提交留言
                    </Button>
                </Form>
                <hr />
                <List
                    header={<div>留言列表</div>}
                    footer={<div>Footer</div>}
                    bordered
                    dataSource={list}
                    renderItem={item => (
                        <List.Item>
                            {item.content}
                            <p>{item.date}</p>
                            <Button type="primary" danger size="small" onClick={() => { this.del(item.id) }}>删除</Button>
                        </List.Item>
                    )}
                />
            </div>
        );
    }

    // 删除
    del(id) {
        // console.log('删除'+id);
        this.props.dispatch({ type: 'message/del', data: id });
    }

    onFinishFailed = (error) => {
        console.log(error);
    }

    onFinish = (values) => {
        this.props.dispatch({ type: 'message/add', data: values });
        // 重置表单
        this.formRef.current.resetFields();
    }

    componentWillMount() {
        // console.log('组件即将挂载');
        this.props.dispatch({ type: 'message/getListAsync' });
    }
}

MessagePage.propTypes = {

}
const mapStateToProps = (state) => {
    // state.namespace 表示当前model中的所有数据集合
    return { message: state.message }
}

export default connect(mapStateToProps)(MessagePage);